<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考试助手 UI 原型</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 15px;
      background-color: #f6f6f6;
      color: #333;
    }

    .header {
      text-align: center;
      padding: 15px 0;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header h1 {
      font-size: 1.5em;
      margin: 0;
      color: #007aff;
    }

    /* Blue theme */
    .card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .card h2 {
      font-size: 1.1em;
      margin-top: 0;
      margin-bottom: 10px;
      border-left: 4px solid #007aff;
      padding-left: 8px;
    }

    .ai-feature {
      border: 1px dashed #007aff;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      background-color: #eaf3ff;
    }

    .ai-feature p {
      margin: 5px 0;
      font-size: 0.9em;
    }

    .ai-feature strong {
      color: #005bb5;
    }

    button {
      background-color: #007aff;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
      width: 100%;
      margin-top: 10px;
    }

    button:hover {
      background-color: #005bb5;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 0.9em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: calc(100% - 22px);
      /* Adjust for padding and border */
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 0.95em;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      font-size: 0.95em;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    li:last-child {
      border-bottom: none;
    }

    .progress-bar {
      background-color: #e0e0e0;
      border-radius: 5px;
      height: 8px;
      width: 100px;
      overflow: hidden;
    }

    .progress {
      background-color: #007aff;
      height: 100%;
    }

    .status {
      font-size: 0.85em;
      padding: 3px 8px;
      border-radius: 10px;
    }

    .status-pending {
      background-color: #fffbe6;
      color: #d48806;
      border: 1px solid #ffe58f;
    }

    .status-ongoing {
      background-color: #e6f7ff;
      color: #1890ff;
      border: 1px solid #bae7ff;
    }

    .status-done {
      background-color: #f6ffed;
      color: #52c41a;
      border: 1px solid #d9f7be;
    }

    .quick-link {
      text-decoration: none;
      color: #007aff;
      font-size: 0.9em;
    }

    .anxiety-tip {
      background-color: #f0fff0;
      border: 1px solid #b7ebde;
      color: #0d8c5a;
      padding: 10px;
      border-radius: 5px;
      margin-top: 15px;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>考试助手</h1>
  </div>

  <div class="card">
    <h2>AI 学习计划生成</h2>
    <div class="form-group">
      <label for="subject">科目</label>
      <input type="text" id="subject" placeholder="例如：高等数学">
    </div>
    <div class="form-group">
      <label for="target-score">目标分数</label>
      <input type="number" id="target-score" placeholder="例如：90">
    </div>
    <div class="form-group">
      <label for="exam-date">考试日期</label>
      <input type="date" id="exam-date">
    </div>
    <div class="ai-feature">
      <p><strong>AI 建议:</strong> 输入信息后，AI 将为你量身定制每日/每周复习计划。</p>
    </div>
    <button>生成学习计划</button>
  </div>

  <div class="card">
    <h2>我的学习计划</h2>
    <ul>
      <li>
        <span>高数 - 第一章 微分中值定理</span>
        <span class="status status-ongoing">进行中</span>
        <div class="progress-bar">
          <div class="progress" style="width: 60%;"></div>
        </div>
      </li>
      <li>
        <span>英语 - 单元测试 3</span>
        <span class="status status-pending">待开始</span>
        <div class="progress-bar">
          <div class="progress" style="width: 0%;"></div>
        </div>
      </li>
      <li>
        <span>专业课 - 项目设计</span>
        <span class="status status-done">已完成</span>
        <div class="progress-bar">
          <div class="progress" style="width: 100%;"></div>
        </div>
      </li>
      <!-- More items -->
    </ul>
    <button style="background-color: #f0f0f0; color: #555; margin-top: 10px;">查看完整计划</button>
  </div>

  <div class="card">
    <h2>AI 知识点薄弱分析</h2>
    <p>上传笔记或完成在线练习，让 AI 帮你找出薄弱环节。</p>
    <div class="ai-feature">
      <p><strong>AI 分析:</strong> 根据最近的“高数”练习记录，你在“曲率”相关的题目上错误率较高。</p>
      <p><strong>推荐资源:</strong> <a href="#" class="quick-link">曲率概念讲解视频</a> | <a href="#" class="quick-link">相关练习题</a>
      </p>
    </div>
    <button>上传笔记/开始练习</button>
  </div>

  <div class="card">
    <h2>AI 模拟测验</h2>
    <p>选择科目和难度，进行一次智能模拟测验。</p>
    <!-- Placeholder for subject/difficulty selection -->
    <div class="ai-feature">
      <p><strong>上次测验 (英语四级):</strong> 75分。<strong>AI 评估:</strong> 听力理解有待提高，建议多听真题录音。</p>
    </div>
    <button>开始新的测验</button>
  </div>

  <div class="card">
    <h2>考前焦虑疏导</h2>
    <div class="anxiety-tip">
      <p><strong>AI 减压提示:</strong> 检测到你最近访问复习资料频繁，且临近考试。试试深呼吸练习或短暂休息，听听舒缓音乐放松一下吧。</p>
      <a href="pages/exam_helper/anxiety_tips/anxiety_tips" class="quick-link">查看更多减压技巧</a>
    </div>
  </div>

</body>

</html>